<%--
  Created by IntelliJ IDEA.
  User: 14815
  Date: 2022/8/7
  Time: 11:56
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<%--获取servlet context 根路径--%>
<%pageContext.setAttribute("APP_PATH", request.getContextPath());%>

<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>1.两数之和-xoj</title>

    <!-- 引入css样式文件 按照这样的顺序，生效的顺序是谁在下谁生效，避免盒子颜色出现覆盖错误-->
    <link rel="stylesheet" href="${APP_PATH}/templates/sys/css/base.css">
    <link rel="stylesheet" href="${APP_PATH}/templates/sys/css/common.css">
    <link rel="stylesheet" href="${APP_PATH}/templates/sys/detail/css/index.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
          crossorigin="anonymous">
    <!-- 显示ico -->
    <link rel="shorcut icon" href="${APP_PATH}/static/images/logo.ico" type="image/x-ixon">

    <%--引入jquery--%>
    <script type="text/javascript" src="${APP_PATH}/static/js/jquery-3.6.0.js"></script>

    <!-- 引入Bootrstap ui框架 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
            crossorigin="anonymous"></script>

    <!-- 引入代码编辑器插件 -->
    <link rel="stylesheet" href="${APP_PATH}/static/codemirror/lib/codemirror.css" />
    <script src="${APP_PATH}/static/codemirror/lib/codemirror.js"></script>
    <!--groovy代码高亮-->
    <script src="${APP_PATH}/static/codemirror/mode/groovy/groovy.js"></script>
    <!--Java代码高亮必须引入-->
    <script src="${APP_PATH}/static/codemirror/clike.js"></script>
    <!-- python代码高亮 -->
    <script src="${APP_PATH}/static/codemirror/mode/python/python.js"></script>
    <!--引入css文件，用以支持主题-->
    <link rel="stylesheet" href="${APP_PATH}/static/codemirror/theme/dracula.css" />
    <!--支持代码折叠-->
    <link rel="stylesheet" href="${APP_PATH}/static/codemirror/addon/fold/foldgutter.css" />
    <script src="${APP_PATH}/static/codemirror/addon/fold/foldcode.js"></script>
    <script src="${APP_PATH}/static/codemirror/addon/fold/foldgutter.js"></script>
    <script src="${APP_PATH}/static/codemirror/addon/fold/brace-fold.js"></script>
    <script src="${APP_PATH}/static/codemirror/addon/fold/comment-fold.js"></script>

    <script text="text/javascript">
        $(function() {

            // 接受页面传递过来的题目id
            var problemId = <%=request.getParameter("problemId")%>
            // 去后端获取当前的题目信息，展示到页面中
            getProblemByProblemId(problemId)


            var currentLanguageType = ''

            // 页面加载时，从后台查询语言数据，展示到选项中
            // 并且记住当前的选项，在执行代码和提交代码作为参数一起发送给后端
            $.ajax({
                url : "${APP_PATH}/code/getCodeType",
                type : "GET",
                success : function (res) {
                    if (res.code === 100) {
                        var list = res.extend.codeType
                        for (var i = 0; i < 8; i ++) {
                            // console.log(list[i])
                            $("#selectLanguage").append('<option>'+ list[i] +'</option>')
                        }
                    }
                }
            })

            let token = window.localStorage.getItem("token")
            // console.log('token:' + token)

            /*
                1. 当localStorage中有token值的时候，证明用户已经登录，此时需要显示的是具体用户头像和退出按钮,不显示登录 hidden
                2. 当localStorage中没有token值的时候，证明用户还没有登录，此时需要显示登录按钮，显示默认的用户头像，不显示退出
            */
            if (token !== null) {

                // 如果token不为空，则需要获取用户头像地址赋值给img的src属性进行展示
                // 获取用户头像
                var path = ''
                // 如果能从数据库获取到用户头像，则将路径展示给变量path，不能则使用默认值
                $.ajax({
                    url: '${APP_PATH}/user/getUserInfoByToken',
                    type: 'GET',
                    data: {
                        "token": token,
                    },
                    beforeSend: function (XMLHttpRequest) {
                        XMLHttpRequest.setRequestHeader("X-Auth0-Token", token);
                    },
                    success: function (res) {
                        // console.log(res)
                        if (res.code === 100) {
                            path = res.extend.userInfo.avatar
                            // console.log(path)
                            if (path == null) {
                                $("#userImg").attr("src", "${APP_PATH}/static/images/defaultUserAvatar.jpg")
                            } else {
                                $("#userImg").attr("src", "${APP_PATH}/static/userImg/"+path)
                            }
                        } else {
                            alert("接口异常，获取用户头像失败！")
                        }
                    }
                })

                $("#userImg").attr("src", "${APP_PATH}/static/images/user.jpg")
                $("#loginBtn").css('visibility', 'hidden')
            } else {
                $("#userImg").attr("src", "${APP_PATH}/static/images/defaultUserAvatar.jpg")
                $('#logoutBtn').css('visibility', 'hidden')
            }

            // 用户点击登录按钮，跳转到登录页面
            $("#loginBtn").click(function () {
                window.location.href = "${APP_PATH}/templates/user/login.jsp"
            })

            // 用户点击退出按钮时，发送ajax请求，携带token返回给后端服务器，并清空浏览器的localStorage中token
            $("#logoutBtn").click(function () {
                $.ajax({
                    url: "${APP_PATH}/user/logout",
                    type: "POST",
                    dataType: "json",
                    data: {
                        "token": token
                    },
                    success: function (data) {
                        // console.log("token:" + token)
                        // console.log(data)
                        if (data.code === 100) {
                            // 退出成功之后，跳转到首页
                            window.localStorage.removeItem("token")
                            window.location.href="${APP_PATH}/templates/sys/questionBank/index.jsp";
                        } else {
                            alert("退出失败，请检查网络设置！")
                        }
                    }
                })
            })

            $("#toUserInfo").click(function () {
                if (token !== null) {
                    window.location.href = "${APP_PATH}/templates/user/userinfo.jsp"
                } else {
                    alert("登录之后才能查看个人信息，请登录！")
                }
            })

            // 点击讨论打开对用题目的讨论模态框，显示讨论内容
            $("#openDiscussionModel").click(function () {

            })

            // 中英文转换
            // 点击转换，获取span里面的题目信息，发送ajax请求，解析返回参数
            $("#tran").click(function () {
                var topicDescription = $.trim($("#topicDescription").text())
                // console.log(topicDescription);

                // 发送请求
                $.ajax({
                    type: 'POST',
                    url: '${APP_PATH}/tran/translate',
                    data: {
                        "content" : topicDescription,
                    },
                    // 自定义请求头参数，返回token值
                    beforeSend: function (XMLHttpRequest) {
                        XMLHttpRequest.setRequestHeader("X-Auth0-Token", token);
                    },
                    // 加了出错，content-type是application/json才有效
                    // processData: false,
                    // contentType: false,
                    success: function (res) {
                        // console.log(res)
                        if (res.code === 100) {
                            // 重新给span标签赋值
                            var content = res.extend.data_success.slice(4)
                            $("#topicDescription").html(content)
                        } else {
                            alert("接口异常，处理失败！")
                        }
                    }
                })

            })

            // 获取用户选择的编程语言
            $("#selectLanguage").change(function () {
                currentLanguageType = $("#selectLanguage").val();
            })

            // 点击提交代码按钮，触发此模态框显示题目评判信息
            $("#submitCode").click(function () {

            })

            // 点击执行代码按钮，触发此模态框展示测试数据信息和执行结果
            $("#executeCode").click(function () {

            })

            /**
             * 通过题目id查询数据
             */
            function getProblemByProblemId (id) {
                $.ajax({
                    url : "${APP_PATH}/problem/getProblemByProblemId",
                    data : {
                        "id" : id,
                    },
                    type : "GET",
                    success: function (res) {
                        // console.log(res)
                        var problem = res.extend.problem

                        // 分别给对应元素赋值
                        $("#problemTitle").text(problem.id + "." + problem.title)
                        $("#problemDifficulty").text(problem.difficulty === 1 ? "中等" : problem.difficulty === 0 ? "简单":  "困难")
                        $("#topicDescription").text(problem.description)

                        var problem = JSON.parse(problem.examples)

                        $("#example1Iuput").text(problem[0].input)
                        $("#example1Output").text(problem[0].output)
                        $("#example1Explain").text(problem[0].explain)

                        $("#example2Iuput").text(problem[1].input)
                        $("#example2Output").text(problem[1].output)

                        $("#example3Iuput").text(problem[2].input)
                        $("#example3Output").text(problem[2].output)
                    }
                })
            }

        })
    </script>


</head>

<body>

<!-- 页面通用部分 导航栏和版权部分 -->
<div class="shortcut">
    <div class="logo wrapper">
        <h1>
            <a href="#">XOJ</a>
        </h1>
        <p>XOJ</p>
    </div>
    <!-- 导航栏 -->
    <div class="nav wrapper">
        <ul>
            <li>
                <a href="https://blog.csdn.net/qq_52397471?type=edu" target="_blank">学习</a>
                <a href="${APP_PATH}/templates/sys/questionBank/index.jsp">题库</a>
                <a href="${APP_PATH}/templates/sys/about/index.jsp">关于</a>
            </li>
        </ul>
    </div>
    <!-- 搜索框 -->
    <div class="search">
        <input type="text" placeholder="搜一搜">
        <!-- 放大镜定位效果 -->
        <span></span>
    </div>

    <div class="login">
        <button id="logoutBtn">
            退出
        </button>
        <button id="loginBtn">
            登录
        </button>
        <button>
            <a id="toUserInfo" href="javascript:void(0);">
                <img id="userImg" src="" alt="">
            </a>
        </button>
    </div>
</div>

<div class="left">
    <!-- tab栏部分 -->
    <div class="header">
        <ul>
            <li>
                <a href="#">题目描述</a>
            </li>
            <!-- 用模态框做 -->
            <li>
                <a id="openDiscussModel" data-bs-toggle="modal" data-bs-target="#staticBackdrop" href="#">评论</a>
            </li>
            <li>
                <a href="#">上一题</a>
            </li>
            <li>1/666</li>
            <li>
                <a href="#">
                    下一题
                </a>
            </li>
        </ul>
    </div>
    <div class="detail">
        <!-- 题目详情展示 -->
        <h4 id="problemTitle"></h4>
        <div class="question_detail">
            <ul>
                <li>
                    <p>难度</p>
                </li>
                <li>
                    <p id="problemDifficulty"></p>
                </li>
                <li>
                    <a id="tran" href="javascript:void(0);">
                        转换为英文
                    </a>
                </li>
            </ul>
        </div>

        <div class="question">
            <div class="question_info">
                    <span id="topicDescription">

                    </span>
            </div>
            <div class="question_example">
                <h5>
                    <strong>示例1:</strong>
                </h5>
                <div class="example1">
                    <strong>输入：</strong>
                    <span id="example1Iuput"></span>
                    <br>
                    <strong>输出：</strong>
                    <span id="example1Output"></span>
                    <br>
                    <strong>解释：</strong>
                    <span id="example1Explain"></span>
                </div>
                <h5>
                    <strong>示例2:</strong>
                </h5>
                <div class="example2">
                    <strong>输入：</strong>
                    <span id="example2Iuput"></span>
                    <br>
                    <strong>输出：</strong>
                    <span id="example2Output"></span>
                </div>
                <h5>
                    <strong>示例3:</strong>
                </h5>
                <div class="example3">
                    <strong>输入：</strong>
                    <span id="example3Iuput"></span>
                    <br>
                    <strong>输出：</strong>
                    <span id="example3Output"></span>
                </div>
            </div>
        </div>
    </div>
</div>

</div>

<div class="right">

    <div class="editor">
        <textarea class="form-control" id="code" name="code"></textarea>
    </div>

    <script>
        //根据DOM元素的id构造出一个编辑器
        var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
            mode: "text/groovy",    //实现groovy代码高亮
            mode: "text/x-java", //实现Java代码高亮
            lineNumbers: true,  //显示行号
            theme: "dracula", //设置主题
            lineWrapping: true, //代码折叠
            foldGutter: true,
            gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
            matchBrackets: true,  //括号匹配
            //readOnly: true,        //只读
        });
        editor.setSize('730px', '590px');     //设置代码框的长宽
        // editor.setValue("class Solution { \n    public int[] twoSum(int[] nums, int target) {\n\n    }\n}");    //给代码框赋值
        // editor.getValue();    //获取代码框的值
    </script>

    <div class="right_footer">
        <!-- 选择语言 -->
        <!-- <h5>选择语言</h5> -->
        <br>
        <select id="selectLanguage">
        </select>

<%--        &lt;%&ndash;设置编辑器样式的窗口&ndash;%&gt;--%>
<%--        <div class="editorStyle">--%>
<%--            &lt;%&ndash;设置代码字体大小&ndash;%&gt;--%>
<%--                <select id="">设置</select>--%>
<%--                <div>--%>
<%--                    <select id="fontsize"></select>--%>
<%--                </div>--%>
<%--                &lt;%&ndash;设置tab键长度&ndash;%&gt;--%>
<%--                <div>--%>
<%--                    <select id="tablength"></select>--%>
<%--                </div>--%>
<%--        </div>--%>

        <div class="footer_button">
            <button id="executeCode" data-bs-toggle="modal" data-bs-target="#executeCodeModel">
                执行代码
            </button>
            <button id="submitCode" data-bs-toggle="modal" data-bs-target="#submitCodeModel">
                提交
            </button>
        </div>
    </div>

</div>

<div class="question_footer">
    <ul>

    </ul>
</div>

<%--执行代码的模态窗口--%>
<div class="modal fade" id="executeCodeModel" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-body">
                ...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<%--提交代码模块模态框--%>
<div class="modal fade" id="submitCodeModel" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-body">
                ...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="staticBackdropLabel">1.两数之和</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="discuss-table">
                    <table>
                        <tbody>
                        <div>
                            <a id="discussUsername" href="#">yuluo</a>
                            <img id="discussUserAvatar" src="../../../static/images/user.jpg" alt="">
                            <p id="discussUserSignature">世界上只有10种人，一种懂二进制，一种不懂。</p>
                            <img id="likesImg" src="../../../static/images/like.png" alt="">
                            <p id="likes">1</p>
                            <a id="del" href="#">删除</a>
                            <p id="discussContent">测试评论内容</p>
                        </div>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" data-bs-dismiss="modal" class="btn btn-secondary">关闭</button>
            </div>
        </div>
    </div>
</div>


</body>

</html>
